overviewControls/controlsManager: Use a custom layout manager

In the future, we want to tightly control the state of the
layout throught gestures, which requires hooking everything
together with adjustments. This is the first step in this
direction.

Add a new custom layout manager for ControlsManager that
allocates the search entry, the view selector, and the Dash,
vertically.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1624>

diff --git a/data/theme/gnome-shell-sass/widgets/_overview.scss b/data/theme/gnome-shell-sass/widgets/_overview.scss
index eb62ba68f75a5126bd6fd6d4da1c39aedcba1cb1..f952c52036b061c823445cf28287d882be68f519 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_overview.scss
+++ b/data/theme/gnome-shell-sass/widgets/_overview.scss
@@ -1,10 +1,6 @@
 /* OVERVIEW */
 
-#overview {
-  spacing: 24px;
-}
-
-#overview-group {
+.controls-manager {
   spacing: 24px;
 }
 

diff --git a/data/theme/gnome-shell-sass/widgets/_search-entry.scss b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
index 329dbc7cd5a77d9b3430f71ad00095257ce7afaf..4568170e46cb8fdf4f0fcc1a343b147656c6a0a8 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_search-entry.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
@@ -11,6 +11,7 @@ $search_entry_height: 36px;
   color: transparentize($fg_color,0.3);
   background-color: $bg_color;
   border-color: $borders_color;
+  margin-top: 24px;
 
   &:hover {
     background-color: $hover_bg_color;

diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index 911576c4e22c4cebef5796cb37aaaa9afee9bc6d..d31c5b96ca913bf964ea7977b8943937a9045127 100644 (file)
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -6,11 +6,57 @@ const { Clutter, GObject, St } = imports.gi;
 const Dash = imports.ui.dash;
 const ViewSelector = imports.ui.viewSelector;
 
+var ControlsManagerLayout = GObject.registerClass(
+class ControlsManagerLayout extends Clutter.BoxLayout {
+    _init(searchEntry, viewSelector, dash) {
+        super._init({ orientation: Clutter.Orientation.VERTICAL });
+
+        this._searchEntry = searchEntry;
+        this._viewSelector = viewSelector;
+        this._dash = dash;
+    }
+
+    vfunc_set_container(container) {
+        this._container = container;
+        this.hookup_style(container);
+    }
+
+    vfunc_allocate(container, box) {
+        const childBox = new Clutter.ActorBox();
+
+        const { spacing } = this;
+
+        const [width, height] = box.get_size();
+        let availableHeight = height;
+
+        // Search entry
+        const [searchHeight] = this._searchEntry.get_preferred_height(width);
+        childBox.set_origin(0, 0);
+        childBox.set_size(width, searchHeight);
+        this._searchEntry.allocate(childBox);
+
+        availableHeight -= searchHeight + spacing;
+
+        // Dash
+        const [, dashHeight] = this._dash.get_preferred_height(width);
+        childBox.set_origin(0, height - dashHeight);
+        childBox.set_size(width, dashHeight);
+        this._dash.allocate(childBox);
+
+        availableHeight -= dashHeight + spacing;
+
+        // ViewSelector
+        childBox.set_origin(0, searchHeight + spacing);
+        childBox.set_size(width, availableHeight);
+        this._viewSelector.allocate(childBox);
+    }
+});
+
 var ControlsManager = GObject.registerClass(
 class ControlsManager extends St.Widget {
     _init() {
         super._init({
-            layout_manager: new Clutter.BinLayout(),
+            style_class: 'controls-manager',
             x_expand: true,
             y_expand: true,
             clip_to_allocation: true,
@@ -54,17 +100,12 @@ class ControlsManager extends St.Widget {
         this.viewSelector = new ViewSelector.ViewSelector(this._searchEntry,
             this._workspaceAdjustment, this.dash.showAppsButton);
 
-        this._group = new St.BoxLayout({
-            name: 'overview-group',
-            vertical: true,
-            x_expand: true,
-            y_expand: true,
-        });
-        this.add_actor(this._group);
+        this.add_child(searchEntryBin);
+        this.add_child(this.dash);
+        this.add_child(this.viewSelector);
 
-        this._group.add_child(searchEntryBin);
-        this._group.add_child(this.viewSelector);
-        this._group.add_actor(this.dash);
+        this.layout_manager = new ControlsManagerLayout(searchEntryBin,
+            this.viewSelector, this.dash);
 
         this.connect('destroy', this._onDestroy.bind(this));
     }